<template>
  <div>
    <el-card class="table-card">
      <div slot="header">
        <h3>线索商品-查看</h3>
      </div>
      <el-row>
        <SkusTable
          :showActionCol="false"
          :columns="tableInfo.columns"
          :loading="tableInfo.loading"
          :dataSource="tableInfo.list"
        />
      </el-row>
    </el-card>
  </div>
</template>
<script>
import SkusTable from '@/components/skusTable';
import { VIEW_TABLE_COLUMN } from './constants';
import { setAuthBtnId } from '@/utils/bizUtils';
import {
  queryDetailByUuidsService, // 批量修改详情
} from '@/api/commodity/temporaryPurchasingGoods/temporaryPurchaseGoods';
import {
  querySalePlatAndSaleAreasService,
} from '@/api/public';

export default {
  components: {
    SkusTable,
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: VIEW_TABLE_COLUMN,
        loading: false
      },
    };
  },
  created () {
    const { productUuid } = this.$route.query;
    this.querySalePlatAndSaleAreas(productUuid);
  },
  methods: {
    // 获取售卖平台及销售区域
    async querySalePlatAndSaleAreas (productUuid) {
      const res = await querySalePlatAndSaleAreasService({});
      if (res) {
        const { retData } = res;
        const salesPlatformList = retData.salePlatList || [];
        this.getTableData(productUuid, salesPlatformList);
      }
    },
    // 获取表格数据
    async getTableData (productUuid, salesPlatformList) {
      setAuthBtnId();
      const { retData } = await queryDetailByUuidsService(
        [productUuid],
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        retData.forEach(element => {
          if (element.salePlatCodes) {
            element.salePlatNames = salesPlatformList.filter(item => element.salePlatCodes.includes(item.salePlatCode)).map(item => item.salePlatName)
          }
        });
        this.tableInfo.list = retData
      }
    },
  }
};
</script>
